<template>
  <div class="relations-content">
    <el-card class="relations-container" shadow="hover">
      <template #header>
        <div class="card-header">
          <div>
            <h3>知识关系网络</h3>
            <p>可视化知识点之间的依赖关系</p>
          </div>
          <el-button 
            type="primary" 
            @click="$emit('open-modal', 'relation')"
            class="add-relation-btn"
          >
            <el-icon><Share /></el-icon>
            <span>新增关系</span>
          </el-button>
        </div>
      </template>

      <div class="relations-grid">
        <el-card 
          v-for="relation in relations" 
          :key="relation.id"
          class="relation-card"
          shadow="hover"
        >
          <div class="relation-content">
            <!-- 源节点 -->
            <div class="relation-node source-node">
              <div class="node-indicator"></div>
              <div class="node-info">
                <div class="node-name">{{ relation.source }}</div>
                <div class="node-type">源节点</div>
              </div>
            </div>

            <!-- 关系连接 -->
            <div class="relation-connection">
              <div class="connection-line" :class="`connection-${relation.type}`">
                <div class="connection-flow"></div>
              </div>
              <div class="relation-label">
                <div class="label-content" :class="`label-${relation.type}`">
                  <span class="label-text">{{ getRelationLabel(relation.type) }}</span>
                  <span class="strength-indicator">
                    <span class="strength-dots">
                      <span 
                        v-for="i in 3" 
                        :key="i"
                        :class="['dot', { active: i <= getStrengthLevel(relation.strength) }]"
                      ></span>
                    </span>
                    <span class="strength-text">{{ getStrengthLabel(relation.strength) }}</span>
                  </span>
                </div>
              </div>
              <div class="connection-arrow" :class="`arrow-${relation.type}`">
                <div class="arrow-inner"></div>
              </div>
            </div>

            <!-- 目标节点 -->
            <div class="relation-node target-node">
              <div class="node-info">
                <div class="node-name">{{ relation.target }}</div>
                <div class="node-type">目标节点</div>
              </div>
              <div class="node-indicator"></div>
            </div>

            <!-- 操作按钮 -->
            <div class="relation-actions">
              <el-button circle size="small" @click="editRelation(relation)" class="action-btn">
                <el-icon><Edit /></el-icon>
              </el-button>
              <el-button circle size="small" type="danger" @click="deleteRelation(relation)" class="action-btn">
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 空状态 -->
      <el-empty v-if="relations.length === 0" description="暂无关系数据">
        <el-button type="primary" @click="$emit('open-modal', 'relation')">
          创建第一个关系
        </el-button>
      </el-empty>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Share, Edit, Delete } from '@element-plus/icons-vue'

// Props
defineProps({
  relations: {
    type: Array,
    default: () => []
  },
  allNodes: {
    type: Array,
    default: () => []
  }
})

// Emits
defineEmits(['open-modal'])

// 示例关系数据
const relations = ref([
  {
    id: 1,
    source: 'HTML结构',
    target: 'CSS样式',
    type: 'prerequisite',
    strength: 'strong'
  },
  {
    id: 2,
    source: 'CSS样式',
    target: 'JavaScript编程',
    type: 'prerequisite',
    strength: 'strong'
  },
  {
    id: 3,
    source: 'JavaScript编程',
    target: 'React框架',
    type: 'prerequisite',
    strength: 'medium'
  },
  {
    id: 4,
    source: 'JavaScript编程',
    target: 'Vue.js框架',
    type: 'prerequisite',
    strength: 'medium'
  },
  {
    id: 5,
    source: 'React框架',
    target: 'Vue.js框架',
    type: 'related',
    strength: 'weak'
  }
])

// 方法
const getRelationLabel = (type) => {
  const labels = {
    prerequisite: '前置依赖',
    related: '相关知识',
    extends: '扩展延伸'
  }
  return labels[type] || '未知关系'
}

const getStrengthLabel = (strength) => {
  return strength === 'strong' ? '强关联' :
         strength === 'medium' ? '中关联' : '弱关联'
}

const getStrengthLevel = (strength) => {
  return strength === 'strong' ? 3 :
         strength === 'medium' ? 2 : 1
}

const editRelation = (relation) => {
  ElMessage.info(`编辑关系: ${relation.source} → ${relation.target}`)
}

const deleteRelation = (relation) => {
  ElMessageBox.confirm(
    '确定要删除这个关系吗？',
    '删除确认',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ElMessage.success('关系删除成功')
  })
}
</script>

<style scoped>
.relations-content {
  width: 100%;
}

.relations-container {
  background: white;
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.relations-container :deep(.el-card__header) {
  background: linear-gradient(135deg, #faf8fc 0%, #f8fafc 100%);
  border-bottom: 1px solid #f1f5f9;
  padding: 24px 28px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.card-header p {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.add-relation-btn {
  background: linear-gradient(135deg, #9f8eaf 0%, #c5a7be 100%);
  border: none;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(159, 142, 175, 0.25);
}

.add-relation-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(159, 142, 175, 0.35);
}

.relations-grid {
  display: grid;
  gap: 24px;
  padding: 8px;
}

.relation-card {
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  overflow: hidden;
}

.relation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(159, 142, 175, 0.12);
  border-color: #e8cadb;
}

.relation-content {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px;
  position: relative;
}

.relation-node {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-radius: 14px;
  min-width: 160px;
  position: relative;
  backdrop-filter: blur(10px);
}

.source-node {
  background: linear-gradient(135deg, #d2dee5 0%, #bdcbd7 100%);
  box-shadow: 0 4px 16px rgba(189, 203, 215, 0.3);
}

.target-node {
  background: linear-gradient(135deg, #9f8eaf 0%, #c5a7be 100%);
  box-shadow: 0 4px 16px rgba(159, 142, 175, 0.3);
  flex-direction: row-reverse;
}

.node-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.node-info {
  flex: 1;
  color: white;
}

.node-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.node-type {
  font-size: 12px;
  opacity: 0.85;
  font-weight: 500;
}

.relation-connection {
  flex: 1;
  position: relative;
  height: 6px;
  display: flex;
  align-items: center;
}

.connection-line {
  height: 6px;
  flex: 1;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.connection-flow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  animation: flow 2s infinite;
}

@keyframes flow {
  0% { left: -100%; }
  100% { left: 100%; }
}

.connection-prerequisite { 
  background: linear-gradient(135deg, #7393c6 0%, #99b4cc 100%);
}
.connection-related { 
  background: linear-gradient(135deg, #a3a88f 0%, #c9afbc 100%);
}
.connection-extends { 
  background: linear-gradient(135deg, #e8cadb 0%, #faf1f8 100%);
}

.relation-label {
  position: absolute;
  left: 50%;
  top: -32px;
  transform: translateX(-50%);
  z-index: 10;
}

.label-content {
  background: white;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 2px solid #f1f5f9;
  text-align: center;
  min-width: 120px;
  backdrop-filter: blur(10px);
}

.label-prerequisite { border-color: #7393c6; }
.label-related { border-color: #a3a88f; }
.label-extends { border-color: #e8cadb; }

.label-text {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}

.label-prerequisite .label-text { color: #7393c6; }
.label-related .label-text { color: #a3a88f; }
.label-extends .label-text { color: #e8cadb; }

.strength-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.strength-dots {
  display: flex;
  gap: 3px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e5e7eb;
  transition: all 0.3s ease;
}

.dot.active {
  background: #9f8eaf;
  transform: scale(1.2);
}

.strength-text {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.connection-arrow {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  transform-origin: center;
  transform: translateY(-50%) rotate(45deg);
}

.arrow-prerequisite { background: #99b4cc; }
.arrow-related { background: #c9afbc; }
.arrow-extends { background: #faf1f8; }

.arrow-inner {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
}

.relation-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: all 0.3s ease;
}

.relation-card:hover .relation-actions {
  opacity: 1;
}

.action-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #f1f5f9;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
  background: #9f8eaf;
  border-color: #9f8eaf;
  color: white;
  transform: scale(1.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .relation-content {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }
  
  .relation-connection {
    width: 6px;
    height: 80px;
    flex-direction: column;
  }
  
  .connection-line {
    width: 6px;
    height: 100%;
  }
  
  .connection-arrow {
    bottom: -8px;
    right: 50%;
    top: auto;
    transform: translateX(50%) rotate(135deg);
  }
  
  .relation-label {
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
  }
  
  .relation-node {
    min-width: auto;
    width: 100%;
    justify-content: center;
  }
}
</style>